<script setup>
//按需导入响应式函数 ref
import { ref, reactive } from 'vue'

//创建一个ref响应式数据
const msg = ref('Hello')

//创建一个响应式对象
const obj = reactive({
  name:'小Vue',
  age:9
    })

//创建一个函数方法
const fn = () => {
  return 666
}
</script>

<template>
  <!--   直接放变量-->
  <h1>{{ msg }}</h1>

  <!--  放对象.属性-->
  <h2>我叫{{ obj.name }},今年{{ obj.age }}岁了</h2>

  <!--   三元运算-->
  <h3>{{ obj.age >= 18 ? '已成年' : '未成年' }}</h3>

  <!--  算数运算-->
  <h4>下一年就{{ obj.age + 1 }}岁了</h4>

  <!--  函数的调用-->
  <h5>fn函数的返回值为{{ fn() }}</h5>

  <!--  方法的调用-->
  <h6>{{ msg }}由{{ msg.split(' ').length }}个单词组成</h6>
</template>


<style scoped></style>